{extend name="base/base" /}
{block name="body"}

<style>
        .layui-unselect dl {
            max-height: 160px;
        }

        html {
            background-color: #fff;
        }
    </style>

    <div class="layui-row">
        <form id="main_form" class="layui-form layui-form-pane" action="" method="post" lay-filter="main-form-group">
            <!-- ==================================  隐藏区  ================================== -->
            <input type="hidden" name="id" value="">


            <div class="layui-card">
                <div class="layui-tab layui-tab-card" lay-filter="tab_form">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="1">基本设置</li>
                        <!--<li lay-id="2">内容管理</li>-->
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">

                            <div class="layui-form-item">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="list_order" value="50" lay-verify="required|number"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">升序 数字越小越靠前</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" lay-verify="required" autocomplete="off"
                                           placeholder="请输入标题"
                                           class="layui-input" value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">摘要</label>
                                <div class="layui-input-block">
                                    <input type="text" name="description" autocomplete="off"
                                           placeholder="请输入摘要"
                                           class="layui-input" value="">
                                </div>
                            </div>
                            <!--<div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">开始时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="start_time" id="LAY-component-form-group-date"
                                                 placeholder="yyyy-MM-dd HH:mm:ss"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">结束时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="end_time" id="LAY-end-component-form-group-date"
                                               placeholder="yyyy-MM-dd HH:mm:ss"
                                               autocomplete="off" class="layui-input">

                                    </div>
                                </div>
                            </div>-->


                            <div class="layui-form-item">
                                <label class="layui-form-label">图片地址</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="up_img" autocomplete="off"
                                           placeholder="请输入标题"
                                           class="layui-input upload_wap_img_val" id="upload_wap_img_val"
                                            lay-filter="test1">
                                </div>
                                <div class="layui-input-inline">
                                    &nbsp;<button type="button" class="layui-btn" id="upload_wap_img">上传图片</button>
                                    <button type="button" class="layui-btn " id="upload_wap_img_preview"
                                            onclick="show_one_pic(document.getElementById('upload_wap_img_val').value)">
                                        预览
                                    </button>
                                </div>
                            </div>

                            <!-- <div class="layui-form-item">
                                 <label class="layui-form-label">跳转网址</label>
                                 <div class="layui-input-block">
                                     <input type="text" name="link_id" autocomplete="off"
                                            placeholder="请输入跳转网址"
                                            class="layui-input" value="">
                                 </div>
                             </div>

                             <div class="layui-form-item" pane>
                                 <label class="layui-form-label">是否推荐</label>
                                 <div class="layui-input-inline">
                                     <input type="checkbox" checked="" name="position"
                                            lay-skin="switch" lay-text="开启|关闭" value="1">
                                 </div>
                                 <div class="layui-form-mid layui-word-aux">（关闭后， 幻灯片将不显示）</div>
                             </div>
                             <div class="layui-form-item" pane>
                                 <label class="layui-form-label">是否可见</label>
                                 <div class="layui-input-inline">
                                     <input type="checkbox" checked="" name="display"
                                            lay-skin="switch" lay-text="开启|关闭" value="1">
                                 </div>
                                 <div class="layui-form-mid layui-word-aux">（关闭后， 幻灯片将不显示）</div>
                             </div>

                         </div>

                         <div class="layui-tab-item">
                             <div class="layui-form-item">

                                 <div class="layui-form-item layui-form-text">
                                     <textarea id="body" name="body" class="layui-textarea"
                                               style="height: 380px;width:100%;"></textarea>
                                 </div>
                             </div>
                         </div>-->

                    </div>
                </div>
            </div>
           <input type="hidden" name="category_id" value="{$category_id}" />
            <!-- 按钮区 -->
            <div class="layui-form-item layui-layout-admin" style="display: none">
                <div class="layui-input-block">

                    <div class="layui-footer" style="left: 0;">
                        <button id="form_save" lay-filter="form_save" class="layui-btn"
                                lay-submit="">
                            保存
                        </button>
                        <button id="form_reset" type="button" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <script src="/static/stv/admin/layuiadmin/layui/layui.js?{{time()}}"></script>
    <script src="/static/stv/admin/js/admin.common.js?{{time()}}"></script>
    <link rel="stylesheet" href="/static/stv/admin/kindeditor/themes/default/default.css" media="all">
    <script src="/static/stv/admin/kindeditor/kindeditor.js?{{time()}}"></script>
    <script>

        //========================================== 说明区 ==========================================
        //注意：选项卡tab 依赖 element 模块，否则无法进行功能性操作

        // ==========================  公共变量区  ========================================
        var form_id = 'main_form';
        var save_url = '{:url('admin/article/add')}';
        var up_url = '{:url('upload/uploadPic')}';

        // ==============================  业务处理  ==============================================
        layui.use(['element', 'form'], function () {
            //========================================== layui引用区 ==========================================
            var $ = layui.$
                , form = layui.form
            ;
            //========================================== 页面初始化 ==========================================
            //1、初始化form值:1、后台传来的数据


            //2、初始化编辑器，需要在 初始化form后面，因为editor要调隐藏域的内容
            //var editor = create_editor('body');

            //========================================== 数据提交、元素事件绑定区 ==========================================

            /* 监听提交 */
            form.on('submit(form_save)', function (data) {
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                $.post(save_url, data.field, function (res) {
                    try {
                        if (res.status == 200) {
                            //重新刷新父窗口的数据区
                            parent.layui.table.reload('main-table'); //重载表格
                            parent.layer.close(index); //再执行关闭
                        } else {
                            layer.msg(res.message);
                        }
                    } catch (e) {
                        layer.msg("异常");
                    }

                }, "json");

                return false;
            });

            //2、表单重置
            $('#form_reset').click(function () {
                /* 因为1、通过json赋值 2、layui需要重新渲染form的一些组件 3、有页面会集成kindeditor ，所以重置表单通过刷新浏览器实现最简便 */
                layer.confirm('确定重载表单吗？', function (index) {
                    //1、选择确定后执行的操作
                    window.location.reload();

                    //2、

                    //99、关闭自身窗口，请放在函数内部最后一行
                    layer.close(index);

                });
            });

            //========================================== 渲染区 ==========================================
            //表单重新渲染，请保存到最后一行
            //渲染表单
            form.render();

        });
        //=============================================时间选框================================================
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //开始日期
            var insStart = laydate.render({
                elem: '#LAY-component-form-group-date'
                , type: 'datetime'
                //, min: 0
                , done: function (value, date) {
                    //更新结束日期的最小日期
                    insEnd.config.min = lay.extend({}, date, {
                        month: date.month - 1
                    });
                    //自动弹出结束日期的选择器
                    insEnd.config.elem[0].focus();
                }
            });

            //结束日期
            var insEnd = laydate.render({
                elem: '#LAY-end-component-form-group-date'
                , type: 'datetime'
                //, min: 0
                , done: function (value, date) {
                    //更新开始日期的最大日期
                    insStart.config.max = lay.extend({}, date, {
                        month: date.month - 1
                    });
                }
            });
        });

        //上传组件
        layui.use('upload', function () {
            var $ = layui.$
                , form = layui.form
            ;
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#upload_wap_img' //绑定元素
                , url: up_url //上传接口

                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(1); //上传loading
                }
                , done: function (res) {
                    if (res.status == 200) {
                        var src = res.data.url + '/' + res.data.path;
                        $("#upload_wap_img_val").val(src);
                    } else {
                        layer.msg(res.msg);
                    }
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                }
                , error: function () {
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });

        });
    </script>
{/block}
